<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!--    <th:block th:include="include :: header('视频展示rtsp')"/>-->
</head>
<body class="gray-bg">
<div style="padding: 20px">
    <p style="font-size: 20px;color: #0a7491;font-weight: bold;font-family: 楷体">rtsp拉取视频显示</p>
    <img id="show_video" src="">
</div>
<!--<th:block th:include="include :: footer"/>-->
<script>var contextPath = "/red5_hls";</script>
<script type='text/javascript' src='/js/jquery.min.js'></script>
<script type='text/javascript' src='/js/workbench/WebSocket.js'></script>
<script type='text/javascript' src='/js/plugins/webSocket/sockjs.min.js'></script>
<script type='text/javascript' src='/js/plugins/webSocket/stomp.min.js'></script>

<script >
    var wsUrl = contextPath+"/endpointSockJS";
    $(function () {
        connect();
    });
    var stompClient = null;

    function connect() {
        var sock = new SockJS(wsUrl);
        stompClient = Stomp.over(sock);
        stompClient.connect('alarm', 'alarm', function (frame) {
            stompClient.subscribe("/queue/alarm", handleNotification);
            stompClient.subscribe('/topic/getResponse', function (response) {
                $("#show_video").attr("src", "data:image/*;base64," + data.responseMessage)
            });
        });
        function handleNotification(message) {
            $("#show_video").attr("src", "data:image/*;base64," + JSON.parse(message.body).responseMessage.imageByte)
        }
    }


    // function  selected(event){
    //     var mid= event.getAttribute("id");
    //     if(mid!=null) {
    //         sessionStorage.setItem("mid", mid);
    //     }
    // }
    function sendName() {
        var name = "发送消息";
        stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));//5
    }

</script>
</body>
</html>